<template>
  <div class="wrapper">
    <div class="form-container">
      <el-form :model="form" ref="formRef" :rules="formRules" label-position="left" label-width="90">
        <el-form-item label="APP类型" prop="appType">
          <el-select v-model="form.appType" placeholder="请选择APP类型">
            <el-option label="攸诺城配" value="1"></el-option>
            <el-option label="攸诺运管" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本名" prop="version">
          <el-input v-model="form.version" placeholder="请输入版本名"></el-input>
        </el-form-item>
        <el-form-item label="操作系统" prop="platform">
          <el-select v-model="form.platform" placeholder="请选择操作系统">
            <el-option label="IOS" value="3"></el-option>
            <el-option label="Android" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否强制" prop="isForceUpdate">
          <el-select v-model="form.isForceUpdate" placeholder="请选择是否强制">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="安装包上传" prop="downloadUrl">
          <el-upload
            class="upload-demo"
            :headers="{ Authorization: `Bearer ${token}` }"
            :on-success="handleBackSucc"
            drag
            action="/manager/appInfo/upload"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖拽文件到此处 <em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">文件大小不能超过500MB</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input type="textarea" v-model="form.description" placeholder="简介" />
        </el-form-item>
      </el-form>
      <div class="btn-container">
        <el-button type="primary" @click="submitForm(formRef as FormInstance)">保存</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script lang="tsx" setup name="proStaffAdd">
import { ref } from "vue";
import { App } from "@/api/interface/province/base";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { uploadAppAPI } from "@/api/modules/province/baseAPI";
import { useRouter } from "vue-router";
const token = localStorage.getItem("token");
const router = useRouter();
let form = ref<App.UploadParams>({});
const formRef = ref<FormInstance>();
const formRules = ref<FormRules>({
  appType: [{ required: true, message: "请选择APP类型", trigger: "blur" }],
  version: [{ required: true, message: "请输入版本名", trigger: "blur" }],
  platform: [{ required: true, message: "请选择操作系统", trigger: "blur" }],
  isForceUpdate: [{ required: true, message: "请选择是否强制", trigger: "blur" }],
  name: [{ required: true, message: "请上传安装包", trigger: "blur" }],
  description: [{ required: true, message: "请输入简介", trigger: "blur" }]
});
const submitForm = (formEl: FormInstance) => {
  formEl.validate(valid => {
    if (valid) {
      uploadApp();
    } else {
      ElMessage.error("请填写完整信息");
    }
  });
};
const handleBackSucc = (res: any) => {
  form.value.downloadUrl = res.url;
};
const uploadApp = async () => {
  const { code, msg } = await uploadAppAPI(form.value);
  if (code == "200") {
    ElMessage.success("上传成功");
    router.push("/provinceLevel/proBasic/proAPP/index");
  } else {
    ElMessage.error(msg);
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 15px;
  font-size: 13px !important;
  background-color: white;
  .form-container {
    width: 60%;
    margin: 0 auto;
    .sms-code {
      //   float: right;
      position: absolute;
      right: 5px;
      display: inline-block;
    }
  }
  .title {
    margin: 15px 0;
    margin-left: 22px;
    font-size: 12px;
    font-weight: 700;
  }
  .radio-container {
    // margin-left: 24px;
    vertical-align: bottom;
    span {
      display: inline-block;
      height: 10px;
      margin-right: 15px;
      margin-left: 24px;
      line-height: 15px;
      vertical-align: middle;
    }
  }
  .table-container {
    margin-left: 20px;
    .table-content {
      display: inline-block;
      width: 65%;
      margin-left: 20px;
    }
  }
}
.btn-container {
  text-align: center;
}
::v-deep .el-form-item__label {
  font-size: 12px;
  font-weight: 700;
  color: #999999;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
